<template>
  <div class="app-container flex-cloumn">
    <el-form
        :model="queryParams"
        ref="queryRef"
        v-show="showSearch"
    >
      <el-row :gutter="12">
        <el-col :span="4">
          <el-form-item label="执行日期">
            <el-date-picker
                v-model="queryParams.taskDate"
                placeholder="选择执行日期"
                size="small"
                :style="{width: '100%'}"
                type="date"
                value-format="YYYY-MM-DD">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="任务名称">
            <el-input v-model="queryParams.taskName" placeholder="请输入任务名称" size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button
                type="primary"
                icon="Search"
                size="mini"
                style="margin: 3px 3px"
                @click="handleQuery"
                v-hasPermi="['pricing:taskLog:list']"
            >搜索
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <xTable ref="taskLogRef" v-loading="loading" :data="taskLogList" multiple="false" class="tableDragger_form"
            refId="taskLogRef" @row-dblclick="handleDbclick">
      <template #columList>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="任务ID" align="left" prop="taskId"></el-table-column>
        <el-table-column label="任务名称" align="left" prop="taskName" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="执行状态" prop="status" show-overflow-tooltip>
          <template #default="scope">
            <dict-tag :options="taskLogType" :value="scope.row.status"/>
          </template>
        </el-table-column>
        <el-table-column label="任务开始时间" align="center" prop="startTime" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="任务结束时间" align="center" prop="finishTime" :show-overflow-tooltip="true"/>
      </template>
    </xTable>
    <pagination
        v-show="taskLogTotal > 0"
        :total="taskLogTotal"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />
    <!-- 执行时弹出 -->
    <el-dialog :title="taskLogTitle" v-model="open" width="500px" :close-on-click-modal="false" draggable
               destroy-on-close
               append-to-body>
      <el-form ref="taskLogFromRef" :model="taskLogFrom" label-width="110px">
        <el-form-item label="任务ID" prop="type">
          <el-input :disabled="disableFlag" v-model="taskLogFrom.taskId"/>
        </el-form-item>
        <el-form-item label="任务名称" prop="name">
          <el-input :disabled="disableFlag" v-model="taskLogFrom.taskName"/>
        </el-form-item>
        <el-form-item label="执行状态">
          <dictCombox v-model="taskLogFrom.status" dictType="taskLogType" prop="status"
                      :disabled="disableFlag"
                      size="small"></dictCombox>
        </el-form-item>
        <el-form-item label="任务开始时间" prop="startTime">
          <el-input :disabled="disableFlag" v-model="taskLogFrom.startTime"/>
        </el-form-item>
        <el-form-item label="任务结束时间" prop="finishTime">
          <el-input :disabled="disableFlag" v-model="taskLogFrom.finishTime"/>
        </el-form-item>
        <el-form-item label="任务参数" prop="context">
          <el-input autosize :disabled="disableFlag" type="textarea" v-model="taskLogFrom.context"/>
        </el-form-item>
        <el-form-item label="任务结果" prop="result">
          <el-input :disabled="disableFlag" v-model="taskLogFrom.result"/>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup name="TaskLog">
import {ref} from "vue";
import xTable from "@/xquant/base/xTable";
import dictCombox from "@/xquant/base/dictCombox";
import {
  getTaskLog
} from "@/api/system/task";

const {proxy} = getCurrentInstance();
const {jobType, accStatus, taskLogType} = proxy.useDict(
    "jobType",
    "accStatus",
    "taskLogType"
);


// 任务列表
const taskLogList = ref([]);
// 修改框弹出
const open = ref(false);

// 修改框标题
const taskLogTitle = ref("");
const loading = ref(true);
//数据
const rows = ref([]);
const single = ref(true);
const taskLogTotal = ref(0);
const num = ref(0)
const disableFlag = ref(false);
const showSearch = ref(true);
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 20,
    taskDate: proxy.$moment(new Date()).format("YYYY-MM-DD"),
  },
  taskLogFrom: {}
});

const {queryParams, taskLogFrom} = toRefs(data);


/** 查询账户列表 */
function getList() {
  loading.value = false;
  getTaskLog(queryParams.value).then((response) => {
    taskLogList.value = response.list;
    taskLogTotal.value = response.total;
    loading.value = false;
  });
}

function handleQuery() {
  getList()
}

function handleDbclick(row, column, event) {
  reset();
  open.value = true;
  taskLogTitle.value = "日志信息";
  taskLogFrom.value = row;
  taskLogFrom.value.status = String(row.status);
  disableFlag.value = true;
}

/** 表单重置 */
function reset() {
  taskLogFrom.value = {};
  proxy.resetForm("taskLogFromRef");
}

getList();
</script>
